import React from 'react';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import { observer } from 'mobx-react';
import $ from "jquery";

export interface AdvancedProps {
    advanced: {
        prefixCls?: string,
        className?: string,
        visible?: boolean,
        form: any,
        update: Function;
    };
    prefixCls?: string;
    className?: string;
    onSubmit?: () => void;
    content?: any;
    buttons?: any;
}


@observer
export default class Advanced extends React.Component<AdvancedProps, any> {
    _timer: any;
    static defaultProps = {
        prefixCls: 'coms-mode-advanced',
    }
    hide = () => {
        this.props.advanced.update({ visible: false });
    }

    componentDidMount() {
        window.onresize = () => {
            if (this._timer) {
                clearTimeout(this._timer);
            }
            this._timer = setTimeout(() => {
                this.fixScroll();
            }, 200);
        }
        this.fixScroll();
    }

    componentDidUpdate() {
        this.fixScroll();
    }

    fixScroll = () => {
        const { prefixCls } = this.props;
        let $this = $(ReactDOM.findDOMNode(this));
        const winHeight = $('body').height();
        let height = Math.min($this.height(), winHeight) - 90;
        $this.find(`.${prefixCls}-content`).css({ 'height': height })
    }

    render() {
        const { prefixCls, className, content, buttons } = this.props;
        const { visible = false, } = this.props.advanced;
        const classNames = classnames(prefixCls, className, { [`${prefixCls}-hide`]: !visible });
        return (
            <div className={classNames}>
                <div className={`${prefixCls}-content`}>
                    {content}
                </div>
                <div className={`${prefixCls}-buttons`}>
                    <div style={{ textAlign: 'center' }}>
                        {buttons.map(btn => (
                            <span style={{ marginLeft: 15 }}>{btn}</span>
                        ))}
                    </div>
                </div>
                <div className={`${prefixCls}-mask`}></div>
            </div>
        )
    }
}
